<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div id="bucket" style="width: 1000px;height:400px;"></div>
    <div id="queue" style="width: 1000px;height:400px;"></div>
    <div id="ttr_bucket" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">
    $(function(){
      // bucket 
      var bucket =echarts.init(document.getElementById('bucket'));
      bucket.showLoading();
      setInterval(getBucketInfo,3000)
      
      // ttr_bucket 
      var ttr_bucket =echarts.init(document.getElementById('ttr_bucket'));
      ttr_bucket.showLoading();
      setInterval(getTTRBucketInfo,3000)
      
      // queue
      var queue = echarts.init(document.getElementById('queue'));
      queue.showLoading();
      setInterval(getQueueInfo,3000)
      
      function getBucketInfo() {
        $.ajax({
          url:"/getBucketStat",
          dataType:"json",
          success:function(res){
            // 指定图表的配置项和数据
            var name = []
            var value = []
            
            if (res.data) {
              $.each(res.data,function(k,v){
                name.push(v.bucket_name)
                value.push(v.job_num)
              })  
            }
            
            var option = {
                title: {
                    text: 'bucket实时统计'
                },
                tooltip: {},
                legend: {
                    data:['未到期任务数量']
                },
                xAxis: {
                    data: name
                },
                yAxis: {},
                series: [{
                    name: '未到期任务数量',
                    type: 'bar',
                    data: value
                }]
            };
    
            console.log(option)
            
            // 使用刚指定的配置项和数据显示图表。
            bucket.hideLoading();
            bucket.setOption(option);
          }
        })  
      }
      
      
      function getTTRBucketInfo() {
        $.ajax({
          url:"/getTTRBucketStat",
          dataType:"json",
          success:function(res){
            // 指定图表的配置项和数据
            var name = []
            var value = []
            
            if (res.data) {
              $.each(res.data,function(k,v){
                name.push(v.bucket_name)
                value.push(v.job_num)
              })  
            }
            
            var option = {
                title: {
                    text: 'TTR bucket实时统计'
                },
                tooltip: {},
                legend: {
                    data:['未到期任务数量']
                },
                xAxis: {
                    data: name
                },
                yAxis: {},
                series: [{
                    name: '未到期任务数量',
                    type: 'bar',
                    data: value
                }]
            };
    
            console.log(option)
            
            // 使用刚指定的配置项和数据显示图表。
            ttr_bucket.hideLoading();
            ttr_bucket.setOption(option);
          }
        })  
      }
      
      
      function getQueueInfo() {
        $.ajax({
          url:"/getReadyQueueStat",
          dataType:"json",
          success:function(res){
            // 指定图表的配置项和数据
            var name = []
            var value = []
            if (res.data) {
              $.each(res.data,function(k,v){
                name.push(v.queue_name)
                value.push(v.job_num)
              })  
            }
            
            var option = {
                title: {
                    text: 'ready queue实时统计'
                },
                tooltip: {},
                legend: {
                    data:['未被消费的任务数量']
                },
                xAxis: {
                    data: name
                },
                yAxis: {},
                series: [{
                    name: '未被消费的任务数量',
                    type: 'bar',
                    data: value
                }]
            };
    
            console.log(option)
            
            // 使用刚指定的配置项和数据显示图表。
            queue.hideLoading();
            queue.setOption(option);
          }
        })  
    }
      
      
      
    })
    </script>
</body>
</html>